<template>
	<view>
		<view class="title">
			<view class="suc">支付成功</view>
			<view class="ser">律师马上为您服务</view>
		</view>
		<view class="progress">
			<!-- <u-circle-progress active-color="#1e6ed8" :percent="100" border-width="4" width="256" :duration="durationTime">
				<view class="u-progress-content">
					<view class="u-progress-dot">{{ time }}</view>
					<text class='u-progress-info'>秒</text>
				</view>
			</u-circle-progress> -->
			<view class="loading">
				<image class="img" src="../../static/images/loading.png" mode=""></image>
				<view class="u-progress-content fixed">
					<view class="u-progress-dot">{{ time }}</view>
					<text class='u-progress-info'>秒</text>
				</view>
			</view>
		</view>
		<view class="btn">
			<u-button @click="navTo">返回</u-button>
		</view>
		<view class="order-model">
			<u-modal v-model="show" title="" :show-cancel-button="true" confirm-text="是" cancel-text="否" confirm-color="#fff" cancel-color="#596579" @confirm="confirm">
				<view class="slot-content" style="text-align: center;">
					<view style="font-size: 38rpx;color: #2c313c;">律师已接单</view>
					<view style="font-size: 38rpx;color: #2c313c;padding: 20rpx 0 60rpx;">是否进入咨询?</view>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	import {orderClientFind} from '@/api/orderApi.js'
	export default {
		data() {
			return {
				time: 1,
				show: false,
				principalId:'',
				options:{},
				conversationLi:{},
				timer: null
			}
		},
		onLoad(options) {
			this.options=options
			this._orderClientFind()
		},
		computed: {
			durationTime() {
				return 3 * 1200
			}
		},
		methods: {
			async _orderClientFind(){
				const res= await orderClientFind({id: this.options.orderId})
				console.log(res)
				if(this.principalId==res.data.data.list['principal_id']){
					this.navTo2(this.conversationLi);
				}else{
					this.principalId=res.data.data.list['principal_id'];
				}
				
			},
			navTo() {
				uni.navigateTo({url: `/pages/order/order?status=0`})
			},
			confirm() {
				// 
				console.log('进入咨询')
			},
			navTo2(item) {
				// if (data === '/pages/HM-chat/HM-chat') {
					uni.navigateTo({
						url: '/pages/HM-chat/HM-chat?userId='+item.userId+'&msgId='+item.lastMessage.msgId+'&nickName='+item.lastMessage.nickName,
						success(res) {
							res.eventChannel.emit('lastMessage', item.lastMessage)
						}
					})
				// }
			}
		},
		mounted() {
			uni.$on('setConversationListener-pay-success',ret => {
			   console.log('监听会话列表',ret)
			   let conversationList=ret.conversationList?ret.conversationList:[];
			   let toNavType=false;
			   for(var i=0;i<conversationList.length;i++){
				   if(conversationList[i].userId==this.principalId&&conversationList[i].unreadCount!=0){
				   		toNavType=true;
						this.conversationLi=conversationList[i];
						break;
				   }
			   }
			   if(toNavType){
				   this.navTo2(this.conversationLi);
			   }
			   
			});
			
			
		},
		onShow() {
			this.timer = setInterval(() => {
				this.time ++
				// if (this.time === 5) {
				// 	clearInterval(timer)
				// 	// uni.navigateTo({
				// 	// 	url:'/pages/HM-chat/HM-chat',
				// 	// })
				// 	// this.show = true
				// }
			}, 1000)
		},
		onHide() {
			clearInterval(this.timer)
		},
		destroyed() {
			// this.$IM.Im.removeSimpleMsgListener();//移除简单消息监听
			// this.$IM.Im.removeConversationListener()//移除会话监听
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		text-align: center;
		padding: 80rpx 0;
		.suc {
			font-size: 50rpx;
			letter-spacing: 1rpx;
			color: #2c313c;
			font-weight: bold;
		}
		.ser {
			font-size: 28rpx;
			color: #2c313c;
			padding-top: 20rpx;
		}
	}
	.progress {
		text-align: center;
		.u-progress-content {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.u-progress-dot {
			color: #1e6ed8;
			font-size: 60rpx;
		}
		.u-progress-info {
			padding-left: 16rpx;
			letter-spacing: 2rpx;
			font-size: 30rpx;
			color: #888c99;
			padding-top: 20rpx;
		}
		.loading {
			width: 256rpx;
			height: 256rpx;
			border-radius: 50%;
			margin: 0 auto;
			position: relative;
			image {
				width: 100%;
				height: 100%;
				animation: rotation 2.7s linear infinite;
			}
			.fixed {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}
		}
	}
	.btn {
		margin-top: 120rpx;
		button {
			width: 300rpx;
			height: 90rpx;
			background-color: #ecedf5;
			border-radius: 45rpx;
			border: none;
			&::after {
				border: none;
			}
		}
	}
	@keyframes rotation {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
</style>
